<#include "/macro.include"/>
<#assign className = table.className>
<#assign classNameLower = className?uncap_first>
<template>
    <div>
        <el-row>
            <el-col :span="18">
                <el-button type="primary" size="small" icon="el-icon-plus" @click="add${className}" >新增</el-button>
                <el-button type="success" size="small" icon="el-icon-edit" @click="update${className}" >修改</el-button>
                <el-button type="danger"  size="small" icon="el-icon-document-delete" @click="delete${className}" >删除</el-button>
            </el-col>
            <el-col :span="6">
                <el-input placeholder="可搜索范围回车执行" @keyup.enter.native="startSearch" v-model="searchkey" prefix-icon="el-icon-search" >
                </el-input>
            </el-col>
        </el-row>
        <div style="padding-top: 20px;">
            <!--表单主体-->
            <el-table :data="tableData" border style="width: 100%" @current-change="handleCurrentChange" max-height="450"
              show-overflow-tooltip="true" size="small" highlight-current-row>
                <el-table-column label="" width="50">
                    <template slot-scope="scope">
                        <el-radio :label="scope.$index" v-model="radio">&nbsp;</el-radio>
                    </template>
                </el-table-column>
                <#list table.columns as column>
                    <el-table-column  prop="${column.columnNameLower}" label="${column.columnAlias}">
                    </el-table-column>
                </#list>
            </el-table>
            <!--分页组件-->
            <pagination v-show="pagination.total>0" :total="pagination.total" :page.sync="pagination.pageNum" :limit.sync="pagination.pageSize"
                        @pagination="initTableData"></pagination>
            <!--编辑组件-->
            <el-row v-if="showEdit">
                <el-col :span="24">
                    <edit :father_to_son_pk="choseData" v-on:sonChangeFather="closeEditDialog"></edit>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    //分页组件
    import Pagination from '@/components/pagination/Pagination.vue'
    //编辑组件
    import Edit from './Edit.vue';

    export default {
        data() {
            return {
                showEdit: false,
                searchkey:'', //查询model
                thet: this,
                templateRadio: '1',
                radio: '1',
                choseData: '',
                tableData: [],
                pagination: {
                    pageNum: 1,
                    pageSize: 5,
                    total: 0,
                }
            }
        },
        components: {
            Pagination,Edit
        },
        methods: {
            /**
           	   * 关闭编辑弹窗
             */
            closeEditDialog(){
                this.showEdit = false;
                this.initTableData();//关闭后初始化表单
            },
            /**
                                 * 该部分是基础部分 用于解决elementUi无单选操作的问题
             */
            onRadioChange(e) {
                e === this.radio ? this.radio = '' : this.radio = e
            },
            handleCurrentChange(val) {
                if (val) {
                    this.currentRow = val;
                    let index = this.tableData.findIndex(
                        item => item.pk == this.currentRow.pk
                    )
                    if (index > -1) {
                        this.radio = index;
                    }
                    //this.$emit('data', val.pkg);
                    this.choseData = val.pk; //设置选中值的PK
                }
            },
            /**
                                 * 搜索操作
             */
            startSearch(){
                this.getAxios("/${classNameLower}/search", {pageNo: this.pagination.pageNum, pageSize: this.pagination.pageSize, keyWord: this.searchkey
                }).then(resp => {
                    if (resp.success) {
                        this.tableData = resp.data.list;
                        this.pagination.pageNum = resp.data.pageNum;
                        this.pagination.pageSize = resp.data.pageSize;
                        this.pagination.total = resp.data.total;
                    } else {
                        this.$message.error(resp.message);
                    }
                });
            },
            /**
                                 * 初始化表单数据
             */
            initTableData() {
                this.getAxios("/${classNameLower}/pagelist", {pageNo: this.pagination.pageNum,pageSize: this.pagination.pageSize
                }).then(resp => {
                    if (resp.success) {
                        this.tableData = resp.data.list;
                        this.pagination.pageNum = resp.data.pageNum;
                        this.pagination.pageSize = resp.data.pageSize;
                        this.pagination.total = resp.data.total;
                    } else {
                        this.$message.error(resp.message);
                    }
                });
            },
            /**
                                 * 新增操作
             */
            add${className}() {
                this.radio = ''; //如果有选中项 先清空
                this.choseData = '';
                //业务控制
                this.showEdit = true;
            },
            /**
                                 * 修改操作
             */
            update${className}() {
                if (this.choseData != null && this.choseData != '' && this.choseData != undefined) {
                    this.${className}_pk = this.choseData;
                   //业务控制
                   this.showEdit = true;
                } else {
                    this.$message.error("尚未选中任何要操作的内容项");
                }
            },
            /**
                                 * 删除操作
             */
            delete${className}() {
                if (this.choseData != null && this.choseData != '' && this.choseData != undefined) {
                    this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', { cancelButtonText: '取消',confirmButtonText: '确定', type: 'warning'
                    }).then(() => {
                        this.postAxios('/${classNameLower}/delete/' + this.choseData).then(resp => {
                            if (resp.success) {
                                this.$message.success("删除信息成功");
                                this.initTableData();
                            } else {
                                this.$message.error(resp.message);
                            }
                        })
                    }).catch(() => {
                        this.$message({ type: 'info',message: '操作取消' });
                    });
                } else {
                    this.$message.error("尚未选中任何要操作的内容项");
                }
            }
        },
        mounted() {
            this.initTableData();
        }
    }
</script>
